<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="danmaku.css?a=1">
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      width: 100%;
    }

    .video {
      width: 100%;
      display: block;
    }

    button {
      font-size: 18px;
    }
  </style>
</head>

<body>
  <div class="box">
    <video class="video" src="http://img.ksbbs.com/asset/Mon_1703/eb048d7839442d0.mp4" autoplay controls loop muted></video>
  </div>
  <form onsubmit="sendDanmaku(event)">
    <label for="">发送弹幕</label>
    <input type="text" id="text">
    <label for="">颜色</label>
    <input type="color" id="color" value="#ff0000">
  </form>
  <div>
    <button onclick="danmaku.start(),video.play()">开始</button>
    <button onclick="danmaku.pause(),video.pause()">暂停</button>
    <button onclick="danmaku.stop()">关闭</button>
  </div>
  <div>
    <button onclick="changeCoverage(1)">1/4屏</button>
    <button onclick="changeCoverage(2)">半屏</button>
    <button onclick="changeCoverage(3)">3/4屏</button>
    <button onclick="changeCoverage(4)">全屏</button>
  </div>
  <div>
    <button onclick="changeFontSize(10)">小字体</button>
    <button onclick="changeFontSize(15)">普通字体</button>
    <button onclick="changeFontSize(20)">大字体</button>
  </div>
  <div>
    <button onclick="changeSpeed(1)">慢速</button>
    <button onclick="changeSpeed(2)">普通</button>
    <button onclick="changeSpeed(3)">快速</button>
  </div>
  <div>
    <label for="">透明</label>
    <input type="range" id="opacity" max="1" min="0.1" step="0.1" value="1" onchange="changeOpacity(event)">
    <label for="">不透明</label>
  </div>
  <script src="./danmaku.js"></script>
  <script>
    var timer;
    var video = document.querySelector('.video');
    var danmaku = new Danmaku('.box');
    var data = [{
      text: '哈哈，这个有曾以哦'
    }, {
      text: '地魂牵梦萦 坻款式规范规范土木工程'
    }, {
      text: '666',
      color: 'red'
    }, {
      text: '你看呀，这个人真时械魂牵梦萦 '
    }, {
      text: '你妹啊，怎么能这样'
    }, {
      text: '你妈喊你回家吃饭！'
    }, {
      text: '散了散了，UP这回可能要凉了'
    }, {
      text: '哈哈'
    }, {
      text: '笑死我了，这人真有意思'
    }, {
      text: '果然好看的小哥哥都有男朋友了，我竟然输给了一个男的'
    }, {
      text: '我也好看啊，怎么没有男朋友'
    }, {
      text: '完蛋罗'
    }, {
      text: 'GG'
    }, {
      text: '额，这是个什么情况'
    }, {
      text: '绝望'
    }];

    function changeCoverage(num) {
      danmaku.setOptions({
        coverage: num
      });
    }

    function changeFontSize(num) {
      danmaku.setOptions({
        fontSize: num
      });
    }

    function changeSpeed(num) {
      danmaku.setOptions({
        speed: num
      });
    }

    function changeOpacity(e) {
      var num = e.target.value;
      danmaku.setOptions({
        opacity: num
      });
    }

    function sendDanmaku(e) {
      e.preventDefault();
      if (text.value) {
        danmaku.send({
          text: text.value,
          color: color.value || 'red'
        });
      }
      text.value = '';
    }

    function push() {
      if (!timer) {
        timer = window.setInterval(function () {
          danmaku.push(data.slice(Math.floor(Math.random() * data.length)))
        }, 1000);
      }
    }

    video.onplay = function () {
      danmaku.start();
      push();
    }
    video.onpause = function () {
      danmaku.pause();
      window.clearInterval(timer);
      timer = null;
    }
    video.onended = function () {
      danmaku.stop();
      window.clearInterval(timer);
      timer = null;
    }
  </script>
</body>

</html>
